<!--
 * @Description: 奖品
 * @Author: Boide
 * @Date: 2022-02-18 11:10:44
 * @LastEditors: guiyi@hongyi.tech
 * @LastEditTime: 2022-02-19 18:43:25
-->
<template>
  <el-card class="box-card">
    <el-form ref="queryForm" :model="query" :inline="true">
      <el-form-item label="">
        <el-input v-model.trim="query.name" placeholder="奖品名称" clearable @change="handleQuery" />
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="query.type" placeholder="全部分类">
          <el-option label="通关奖品" :value="0"></el-option>
          <el-option label="全国排名top10" :value="1"></el-option>
          <el-option label="全国排名top3" :value="2"></el-option>
          <el-option label="三项通过" :value="3"></el-option>
          <el-option label="决赛" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb20">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" v-has-permi="['/wx/menu/postAddWxTag']" @click="handleAdd()">新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
      <el-table-column label="序号" align="center" type="index" width="50" />
      <el-table-column label="奖品名称" align="center" prop="tagName" />
      <el-table-column label="分类" align="center" prop="tagName">
        <template slot-scope="{row}">
          <span>{{ row.tagName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="奖品图片" align="center" width="80px">
        <template slot-scope="{}">
          <el-image
            style="width: 60px; height: 60px"
            :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
            :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-has-permi="['/wx/menu/postUpdateWxTag']" type="text" @click="handleAdd(row)">编辑</el-button>
          <el-button v-has-permi="['/wx/menu/postDelWxTag']" type="text" @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="handleQuery" />

    <!-- 添加或修改菜单 -->
    <el-dialog :title="(formModel.id?'编辑':'新增')+'奖品'" :visible.sync="formVisible" width="600px" append-to-body>
      <el-form ref="formModel" :model="formModel" :rules="formModelRules" label-width="150px">
        <el-form-item label="奖品名称:" prop="name">
          <el-input v-model.trim="formModel.name" style="width: 200px" clearable placeholder="请输入标签名称" maxlength="50" />
        </el-form-item>
        <el-form-item label="奖品图片:" prop="img">
          <upload-img v-model="formModel.img" />
        </el-form-item>
        <el-form-item label="分类:" prop="type">
          <el-select v-model="formModel.type" placeholder="请选择">
            <el-option label="通关奖品" :value="0"></el-option>
            <el-option label="全国排名top10" :value="1"></el-option>
            <el-option label="全国排名top3" :value="2"></el-option>
            <el-option label="三项通过" :value="3"></el-option>
            <el-option label="决赛" :value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible=!formVisible;reset;">取 消</el-button>
        <el-button :loading="submitLoading" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { choiceQuestionList } from '@/api/skinDisease/collocate/questionBank'

export default {
  name: "index",
  data () {
    return {
      total: 0,
      // 列表数据
      query: {
        pageNum: 1,
        pageSize: 10
      },
      dataList: [],
      listLoading: false,
      // 新增/编辑用户
      formVisible: false,
      submitLoading: false,
      formModel: {},
      formModelRules: {
        name: [
          { required: true, message: "奖品名称不能为空", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    handleQuery () {
      this.listLoading = true
      let params = {...this.query}
      choiceQuestionList(params).then(res => {
        this.dataList = res.data.records
        this.total = res.data.total
        this.listLoading = false
      }).catch(err => {
        if (err.code === -103) {
          this.$router.push('/403')
        }
        this.listLoading = false
      })
    },
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleAdd(row) {
      this.reset()
      if (row) {
        this.formModel = {...row}
      }
      this.formVisible = !this.formVisible
    },
    handleDelete (id) {
      this.$confirm(`请确认是否要删除该奖品?`, { type: 'warning' }).then(() => {
        delSign({id}).then(() => {
          this.$message.success('删除成功')
          this.handleQuery()
        })
      })
    },
    // 新增/编辑
    submitForm () {
      this.submitLoading = true
      this.$refs["formModel"].validate(async valid => {
        if (valid) {
          let params = {...this.formModel}
          try {
            if (this.formModel.id) {
              await editSign(params)
              this.$message.success('修改成功')
            } else {
              await addSign(params)
              this.$message.success('新增成功')
            }
            this.formVisible = !this.formVisible
            this.handleQuery()
            this.submitLoading = false
          } catch (error) {
            this.submitLoading = false
          }
        } else {
          this.submitLoading = false
        }
      })
    },
    // 表单重置
    reset () {
      this.formModel = {}
      this.resetForm("formModel")
    },
  },
  mounted () {
    this.query = {}
    this.handleQuery()
  },
}
</script>

<style scoped>
.dh {
  width: 0;
  height: 100px;
  background-color: #1c84c6;
  transition: all 1s;
}
.dh.show {
  width: 200px;
}
.dh.hide {
  width: 0;
}
</style>
